<template>
  <div>
    <Header></Header>
    <Homeswiper :list="swiperList"></Homeswiper>
    <Icons :list="iconList"></Icons>
    <HomeRecommend :list="recommendList"></HomeRecommend>
    <Homeweekend :list="weekendList"></Homeweekend>
  </div>
</template>

<script>
  import Header from "./components/Header";
  import Homeswiper from "./components/swiper";
  import Icons from "./components/Icons";
  import HomeRecommend from "./components/Recommend";
  import Homeweekend from "./components/weekend";
  import {mapState} from 'vuex'
  import axios from 'axios'

  export default {
    name: "home",
    components:{
      Header,
      Homeswiper,
      Icons,
      HomeRecommend,
      Homeweekend,
    },
    computed:{
      ...mapState(['city'])
    },
    data(){
      return{
        swiperList: [],
        iconList:[],
        recommendList:[],
        weekendList:[],
        lastCity: ''
      }
    },
    methods:{
      getHomeInfo()
        {
          axios.get('/static/mock/index.json?city=' + this.city)
            .then(this.getHomeInfoSucc)
        },
      getHomeInfoSucc(res){
        res=res.data
        if (res.data&&res.ret){
          const data = res.data
          this.swiperList = data.swiperList
          this.iconList = data.iconList
          this.recommendList = data.hotList
          this.weekendList = data.weekendList
        }
        console.log(res)
      }
    },
    mounted() {
      this.lastCity = this.city
      this.getHomeInfo()
    },
    activated() {
      if (this.lastCity !== this.city){
        this.lastCity = this.city
        this.getHomeInfo()
      }
    }
  }
</script>

<style scoped>

</style>
